<template>
  <Page class="bg-gradient-to-br from-[#e3f2fd] to-[#f8fbff] flex justify-center py-[20rpx] min-h-screen">
    <view class="container w-[750rpx] bg-white rounded-[20rpx] shadow-[0_15rpx_40rpx_rgba(33,150,243,0.2)] overflow-hidden my-[20rpx] relative">
      <!-- 头部区域 -->
      <view class="header bg-gradient-to-r from-[#2196F3] to-[#0d47a1] text-white px-[40rpx] py-[30rpx] relative overflow-hidden text-center">
        <view class="absolute top-[-50rpx] right-[-50rpx] w-[200rpx] h-[200rpx] bg-[rgba(255,255,255,0.1)] rounded-full"></view>
        <view class="absolute bottom-[-80rpx] left-[-30rpx] w-[150rpx] h-[150rpx] bg-[rgba(255,255,255,0.08)] rounded-full"></view>
        
        <view class="title text-[32rpx] font-bold mb-[10rpx] relative z-[2]">电商平台任务发布</view>
        <view class="subtitle text-[18rpx] opacity-[0.9] max-w-[600rpx] mx-auto relative z-[2]">创建您的开发任务，吸引优秀开发者参与</view>
      </view>
      
      <!-- 表单部分 -->
      <view class="form-container px-[40rpx] py-[30rpx]">
        <!-- 任务基本信息 -->
        <view class="form-section mb-[30rpx] pb-[25rpx] border-b border-[#e0e0e0]">
          <view class="section-title flex items-center mb-[25rpx] text-[22rpx] font-bold text-[#0d47a1]">
            <view class="w-[40rpx] h-[40rpx] bg-[#e3f2fd] rounded-full flex items-center justify-center mr-[15rpx] text-[#2196F3]">
              <IconFont name="icon-info-circle" />
            </view>
            <text>任务基本信息</text>
          </view>
          
          <view class="form-group mb-[22rpx]">
            <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">任务标题</view>
            <nut-input 
              v-model="taskInfo.title"
              class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
              placeholder="例如：电商平台前端界面开发"
            ></nut-input>
          </view>
          
          <view class="form-group mb-[22rpx]">
            <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">任务描述</view>
            <nut-textarea 
              v-model="taskInfo.description"
              class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
              placeholder="详细描述您的任务需求..."
              :minHeight="120"
            ></nut-textarea>
          </view>
          
          <view class="form-row flex gap-[20rpx] mb-[20rpx]">
            <view class="form-col flex-1">
              <view class="form-group mb-[22rpx]">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">总悬赏金额 (¥)</view>
                <nut-input 
                  v-model="taskInfo.totalAmount"
                  type="number"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                ></nut-input>
              </view>
            </view>
            <view class="form-col flex-1">
              <view class="form-group mb-[22rpx]">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">阶段数</view>
                <nut-input 
                  v-model="taskInfo.stageCount"
                  type="number"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                ></nut-input>
              </view>
            </view>
            <view class="form-col flex-1">
              <view class="form-group mb-[22rpx]">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">预计周期 (天)</view>
                <nut-input 
                  v-model="taskInfo.timeLimit"
                  type="number"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                ></nut-input>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 阶段设置 -->
        <view class="form-section mb-[30rpx] pb-[25rpx] border-b border-[#e0e0e0]">
          <view class="section-title flex items-center mb-[25rpx] text-[22rpx] font-bold text-[#0d47a1]">
            <view class="w-[40rpx] h-[40rpx] bg-[#e3f2fd] rounded-full flex items-center justify-center mr-[15rpx] text-[#2196F3]">
              <IconFont name="icon-tasks" />
            </view>
            <text>悬赏阶段设置</text>
          </view>
          
          <view id="stagesContainer">
            <view 
              v-for="(stage, index) in stages" 
              :key="index"
              class="stage bg-[#f5fbff] rounded-[15rpx] p-[20rpx] mb-[20rpx] border border-[#bbdefb] relative"
            >
              <view class="stage-header flex items-center mb-[15rpx]">
                <view class="stage-number bg-[#2196F3] text-white w-[30rpx] h-[30rpx] rounded-full flex items-center justify-center mr-[15rpx] font-bold">
                  {{ index + 1 }}
                </view>
                <view class="font-medium">阶段 #{{ index + 1 }}</view>
                <button 
                  class="remove-stage ml-auto bg-[#ffebee] border-none w-[30rpx] h-[30rpx] rounded-full text-[#f44336] cursor-pointer transition-all duration-300 hover:bg-[#f44336] hover:text-white"
                  @click="removeStage(index)"
                >
                  <IconFont name="icon-times" />
                </button>
              </view>
              <view class="form-group mb-[15rpx]">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">阶段名称</view>
                <nut-input 
                  v-model="stage.name"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                  placeholder="输入阶段名称"
                ></nut-input>
              </view>
              <view class="form-group mb-[15rpx]">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">阶段金额 (¥)</view>
                <nut-input 
                  v-model="stage.amount"
                  type="number"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                  placeholder="输入金额"
                  @input="updatePreview"
                ></nut-input>
              </view>
              <view class="form-group">
                <view class="block mb-[8rpx] font-semibold text-[#37474F] text-[16rpx]">阶段描述</view>
                <nut-textarea 
                  v-model="stage.description"
                  class="form-control w-full px-[16rpx] py-[14rpx] border-2 border-[#e0e0e0] rounded-[12rpx] text-[16rpx] bg-[#fafafa] focus:border-[#2196F3] focus:bg-white focus:shadow-[0_0_0_3rpx_rgba(33,150,243,0.2)] outline-none transition-all duration-300"
                  placeholder="描述阶段任务"
                ></nut-textarea>
              </view>
            </view>
          </view>
          
          <button 
            id="addStage" 
            class="add-stage w-full p-[14rpx] bg-[#e3f2fd] text-[#2196F3] border-2 border-dashed border-[#90caf9] rounded-[12rpx] text-[16rpx] font-semibold cursor-pointer transition-all duration-300 hover:bg-[#bbdefb]"
            @click="addStage"
          >
            <IconFont name="icon-plus-circle" class="mr-[5rpx]" />
            添加新阶段
          </button>
        </view>
        
        <!-- 预览区域 -->
        <view class="preview-section bg-[#f5fbff] rounded-[15rpx] p-[25rpx] mt-[30rpx] border border-[#bbdefb]">
          <view class="preview-title flex items-center">
            <IconFont name="icon-eye" class="text-[#2196F3]" />
            <view class="font-medium ml-[10rpx]">任务预览</view>
          </view>
          
          <view class="preview-grid grid grid-cols-3 gap-[15rpx] mb-[20rpx]">
            <view class="preview-card bg-white rounded-[12rpx] p-[15rpx] text-center shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]">
              <view class="preview-value text-[20rpx] font-bold text-[#2196F3] mb-[5rpx]">¥{{ formatNumber(taskInfo.totalAmount) }}</view>
              <view class="preview-label text-[14rpx] text-[#78909C]">总悬赏金额</view>
            </view>
            <view class="preview-card bg-white rounded-[12rpx] p-[15rpx] text-center shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]">
              <view class="preview-value text-[20rpx] font-bold text-[#2196F3] mb-[5rpx]">{{ taskInfo.stageCount }}</view>
              <view class="preview-label text-[14rpx] text-[#78909C]">阶段数</view>
            </view>
            <view class="preview-card bg-white rounded-[12rpx] p-[15rpx] text-center shadow-[0_3rpx_10rpx_rgba(0,0,0,0.05)]">
              <view class="preview-value text-[20rpx] font-bold text-[#2196F3] mb-[5rpx]">{{ taskInfo.timeLimit }}天</view>
              <view class="preview-label text-[14rpx] text-[#78909C]">预计周期</view>
            </view>
          </view>
          
          <view class="stage-list mt-[20rpx]">
            <view 
              v-for="(stage, index) in stages" 
              :key="index"
              class="preview-stage bg-white rounded-[10rpx] p-[15rpx] mb-[10rpx] flex justify-between items-center shadow-[0_2rpx_5rpx_rgba(0,0,0,0.05)]"
            >
              <view class="stage-info flex-1">
                <view class="stage-name font-semibold text-[#37474F] mb-[5rpx]">{{ stage.name }}</view>
                <view class="stage-desc text-[14rpx] text-[#78909C]">{{ stage.description }}</view>
              </view>
              <view class="stage-price font-bold text-[#2196F3] min-w-[80rpx] text-right">¥{{ formatNumber(stage.amount) }}</view>
            </view>
          </view>
        </view>
        
        <!-- 按钮区域 -->
        <view class="button-group flex gap-[20rpx] mt-[30rpx]">
          <nut-button 
            class="btn flex-1 py-[16rpx] rounded-[12rpx] text-[18rpx] font-semibold flex items-center justify-center border-none bg-transparent text-[#2196F3] border-2 border-[#2196F3] hover:bg-[rgba(33,150,243,0.1)] transition-all duration-300"
            @click="saveDraft"
          >
            <IconFont name="icon-save" class="mr-[10rpx]" />
            保存草稿
          </nut-button>
          <nut-button 
            class="btn flex-1 py-[16rpx] rounded-[12rpx] text-[18rpx] font-semibold flex items-center justify-center border-none bg-gradient-to-r from-[#2196F3] to-[#0d47a1] text-white shadow-[0_5rpx_15rpx_rgba(33,150,243,0.4)] hover:translate-y-[-3rpx] hover:shadow-[0_8rpx_20rpx_rgba(33,150,243,0.6)] transition-all duration-300"
            @click="publishTask"
          >
            <IconFont name="icon-paper-plane" class="mr-[10rpx]" />
            发布任务
          </nut-button>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Input as nutInput, Textarea as nutTextarea, Button as nutButton } from '@nutui/nutui-taro'

// 任务基本信息
const taskInfo = ref({
  title: '网站前端界面设计与开发',
  description: '我们需要为电商平台开发一个现代化的前端界面，要求使用React框架，响应式设计，并整合支付功能。需要完成首页、产品列表页、详情页和购物车页面。',
  totalAmount: 12000,
  stageCount: 3,
  timeLimit: 15
})

// 阶段数据
const stages = ref([
  {
    name: '需求分析与设计',
    amount: 3000,
    description: '完成需求文档和UI设计稿'
  },
  {
    name: '核心功能开发',
    amount: 6000,
    description: '实现核心页面和功能模块'
  },
  {
    name: '测试与交付',
    amount: 3000,
    description: '全面测试并交付完整项目'
  }
])

// 添加阶段
const addStage = () => {
  if (stages.value.length >= 5) {
    Taro.showToast({
      title: '最多只能添加5个阶段',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  stages.value.push({
    name: '',
    amount: '',
    description: ''
  })
  
  // 更新阶段数
  taskInfo.value.stageCount = stages.value.length
  updateTotalAmount()
}

// 删除阶段
const removeStage = (index) => {
  if (stages.value.length <= 1) {
    Taro.showToast({
      title: '至少保留1个阶段',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  stages.value.splice(index, 1)
  
  // 更新阶段数
  taskInfo.value.stageCount = stages.value.length
  updateTotalAmount()
}

// 更新总金额
const updateTotalAmount = () => {
  let total = 0
  stages.value.forEach(stage => {
    total += Number(stage.amount) || 0
  })
  taskInfo.value.totalAmount = total
}

// 更新预览信息
const updatePreview = () => {
  updateTotalAmount()
}

// 格式化数字为带千分位的格式
const formatNumber = (num) => {
  if (!num) return '0'
  return Number(num).toLocaleString()
}

// 保存草稿
const saveDraft = () => {
  Taro.showToast({
    title: '草稿已保存',
    icon: 'success',
    duration: 2000
  })
}

// 发布任务
const publishTask = () => {
  // 简单验证
  if (!taskInfo.value.title) {
    Taro.showToast({
      title: '请填写任务标题',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!taskInfo.value.description) {
    Taro.showToast({
      title: '请填写任务描述',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!taskInfo.value.totalAmount || taskInfo.value.totalAmount <= 0) {
    Taro.showToast({
      title: '请填写有效的总金额',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 验证阶段信息
  for (let i = 0; i < stages.value.length; i++) {
    const stage = stages.value[i]
    if (!stage.name) {
      Taro.showToast({
        title: `请填写第${i+1}阶段名称`,
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    if (!stage.amount || stage.amount <= 0) {
      Taro.showToast({
        title: `请填写第${i+1}阶段金额`,
        icon: 'none',
        duration: 2000
      })
      return
    }
  }
  
  // 提交成功
  Taro.showToast({
    title: '任务发布成功！即将跳转到任务详情页。',
    icon: 'none',
    duration: 2000
  })
  
  // 实际项目中这里应该跳转到任务列表或详情页
  setTimeout(() => {
    Taro.navigateBack()
  }, 2000)
}

// 监听阶段数量变化
watch(() => taskInfo.value.stageCount, (val) => {
  // 当手动修改阶段数时调整阶段数组
  const count = Number(val)
  if (count > stages.value.length) {
    // 添加阶段
    while (stages.value.length < count) {
      stages.value.push({
        name: '',
        amount: '',
        description: ''
      })
    }
  } else if (count < stages.value.length) {
    // 删除阶段
    stages.value.splice(count)
  }
})
</script>